<template>
  <div>
    <div class="center">
      <el-row :gutter="20">
        <el-col :span="3">
          <el-select v-model="form.province_id" placeholder="请选择省" size="small" @change="cityFn">
            <el-option v-for="item in provinceOptions" :key="item.id" :label="item.name" :value="item.id"> </el-option>
          </el-select>
        </el-col>
        <el-col :span="3">
          <el-select v-model="form.city_id" placeholder="请选择市" size="small" @change="areaFn">
            <el-option v-for="item in cityOptions" :key="item.id" :label="item.name" :value="item.id"> </el-option>
          </el-select>
        </el-col>
        <el-col :span="3">
          <el-select v-model="form.area_id" placeholder="请选择区" size="small">
            <el-option v-for="item in areaOptions" :key="item.id" :label="item.name" :value="item.id"> </el-option>
          </el-select>
        </el-col>
        <el-col :span="3"><el-input v-model="form.school_title" placeholder="请输入学校名称关键字" size="small"></el-input></el-col>
        <el-col :span="3"><el-input v-model="form.t_id" placeholder="请输入账号" size="small"></el-input></el-col>
        <el-col :span="3"><el-input v-model="form.real_name" placeholder="请输入学生姓名" size="small"></el-input></el-col>
        <el-col :span="3"><el-button type="primary" size="small" @click="searchFn()">搜索</el-button></el-col>
      </el-row>
      <br>
      <el-row :gutter="20">
        <el-col :span="11" :offset="13" :xl="{span: 9, offset: 12}">
          <el-button v-if="this.menuList.includes('batchDelStudent')" type="primary" plain size="medium" class="dangerBtn" @click="delectsFn()">删除</el-button>
          <el-button v-if="this.menuList.includes('addStudent')" type="primary" size="medium" @click="operationDataFn(1)">添加学生</el-button>
          <el-button v-if="this.menuList.includes('batchAddStudent')" type="primary" size="medium" @click="operationDataFn(2)">批量导入</el-button>
          <el-button v-if="this.menuList.includes('exportStudent')" type="primary" plain size="medium" @click="exportFn()">导出</el-button>
        </el-col>
      </el-row>
      <br>
      <el-row :gutter="24" class="centerTable">
        <simple-table :tableConfig="tableConfig" :tableData="tableData" @operation="operation" @handleSelectionChange="goToDeleteSelect"></simple-table>
      </el-row>
      <br>
      <el-row :gutter="24" class="fr">
        <el-pagination background @current-change="handleCurrentChange" :current-page.sync="currentPage" :page-size="this.limit" layout="total, prev, pager, next" :total="total"> </el-pagination>
      </el-row>
    </div>
    <!-- 选择学校 -->
    <select-school v-if="this.isSelectSchool" :isSelectSchool="this.isSelectSchool" :operation="this.operation" @noSelectSchool="noSelectSchool"></select-school>
    <!-- 新增学生 -->
    <add-student v-if="this.isAddStudent" :isAddStudent="this.isAddStudent" :schoolId="this.schoolId" @noAddStudent="noAddStudent"></add-student>
    <!-- 编辑学生 -->
    <edit-student v-if="this.isEditStudent" :rows="this.rows" :isEditStudent="this.isEditStudent" @noEditStudent="noEditStudent"></edit-student>
    <!-- 批量导入 -->
    <bulk-import :isBulkImportt="this.isBulkImportt" :schoolId="this.schoolId" @noBulkImportt="noBulkImportt"></bulk-import>
    <!-- 分发 -->
    <distribution v-if="isDistribution" :isDistribution="this.isDistribution" :uid="this.uid" :schoolId="this.schoolId" @noDistribution="noDistribution"></distribution>
  </div>
</template>
<script>
import downloadApi from '@/common/downloadApi.js'
import simpleTable from '@/components/table.vue'
import selectSchool from './components/selectSchool.vue'
import addStudent from './components/addStudent.vue'
import editStudent from './components/editStudent.vue'
import bulkImport from './components/bulkImport.vue'
import distribution from './components/distribution.vue'
import {APISTUDENTLIST, APISCHOOLWHOLEREGION, APIDELSTUDENT, APIDELSTUDENTS} from '@/common/api.js'
export default {
  components: { simpleTable, selectSchool, addStudent, editStudent, bulkImport, distribution },
  data () {
    return {
      api: '',
      menuList: [],
      schoolId: '',
      operationDataType: 0, // 0默认，1新增，2批量导入
      provinceOptions: [],
      cityOptions: [],
      areaOptions: [],
      isSelectSchool: false,
      isAddStudent: false,
      isEditStudent: false,
      isBulkImportt: false,
      isDistribution: false,
      uid: '',
      tableConfig: {
        load: false,
        size: 'small', // 表格大小
        style: 'width:100%', // 表格宽度
        align: 'center',
        selection: true,
        border: true,
        config: [
          {name: '序号', type: 'index', width: '60px'},
          {id: 'real_name', name: '学生姓名'},
          {id: 't_id', name: '账号'},
          {id: 'student_id', name: '学籍号'},
          {id: 'school_title', name: '学校名称'},
          {id: 'province_name', name: '省份'},
          {id: 'city_name', name: '城市'},
          {id: 'area_name', name: '区/县'},
          {id: 'section_title', name: '学段'},
          {id: 'grade_title', name: '年级'},
          {id: 'class_title', name: '班级'}
        ]
      },
      tableData: [],
      form: {
        province_id: '',
        city_id: '',
        area_id: '',
        school_title: '',
        t_id: '',
        real_name: ''
      },
      rows: {},
      currentPage: 1,
      total: 0,
      page: 1,
      checkStr: '',
      limit: 10
    }
  },
  created () {
    this.Api = downloadApi
    this.getWholeRegion()
    this.tableList()
    this.menuList = sessionStorage.getItem('list')
    var operation = {id: 'operation', name: '操作', list: []}
    if (this.menuList.includes('personalStudent')) {
      var operation1 = {id: 'archives', name: '个人档案'}
      operation.list.push(operation1)
    }
    if (this.menuList.includes('editStudent')) {
      var operation2 = {id: 'edit', name: '编辑'}
      operation.list.push(operation2)
    }
    if (this.menuList.includes('dispatchStudent')) {
      var operation3 = {id: 'distribution', name: '分发'}
      operation.list.push(operation3)
    }
    if (this.menuList.includes('delStudent')) {
      var operation4 = {id: 'delect', name: '删除'}
      operation.list.push(operation4)
    }
    this.tableConfig.config.push(operation)
  },
  methods: {
    getWholeRegion () {
      APISCHOOLWHOLEREGION().then((res) => {
        this.provinceOptions = res.data
      }).catch((err) => {
        this.$message.error(err.msg)
      })
    },
    cityFn () {
      this.form.city_id = ''
      this.form.area_id = ''
      APISCHOOLWHOLEREGION({
        parent_id: this.form.province_id
      }).then((res) => {
        this.cityOptions = res.data
      }).catch((err) => {
        this.$message.error(err.msg)
      })
    },
    areaFn () {
      this.form.area_id = ''
      APISCHOOLWHOLEREGION({
        parent_id: this.form.city_id
      }).then((res) => {
        this.areaOptions = res.data
      }).catch((err) => {
        this.$message.error(err.msg)
      })
    },
    searchFn () {
      this.tableList()
    },
    tableList () { // 表格
      this.form.page = this.page
      this.form.limit = this.limit
      APISTUDENTLIST(this.form).then((res) => {
        if (res.status === 1) {
          this.total = res.data.totalNumber
          this.currentPage = res.data.page
          this.tableData = res.data.list
        } else {
          this.$message.error(res.msg)
          this.InIt()
        }
      }).catch((err) => {
        this.$message.error(err.msg)
      })
    },
    handleCurrentChange (val) { // 分页
      this.page = val
      this.tableList()
    },
    goToDeleteSelect (val) { // 多选
      let arr = []
      val.val.forEach(item => {
        arr.push(item.uid)
      })
      this.checkStr = arr.toString()
    },
    operation (val) { // 按钮
      if (val.id === 'edit') { // 编辑
        this.editStudent(val)
      } else if (val.id === 'delect') { // 删除
        this.delectFn(val)
      } else if (val.id === 'archives') { // 个人档案
        this.$router.push({path: './archives', query: { id: val.rows.uid }})
      } else if (val.id === 'distribution') { // 分发
        this.distribution(val)
      }
    },
    operationDataFn (type) { // 选择学校类型
      this.operationDataType = type
      this.selectSchool()
    },
    selectSchool () { // 选择学校
      this.isSelectSchool = true
    },
    noSelectSchool (list) {
      this.isSelectSchool = false
      if (this.operationDataType === 1) {
        if (list.type === 1) {
          this.schoolId = list.school
          this.addStudent()
        }
      } else if (this.operationDataType === 2) {
        if (list.type === 1) {
          this.schoolId = list.school
          this.bulkImportt()
        }
      }
    },
    addStudent () { // 添加学生
      this.isAddStudent = true
    },
    noAddStudent (type) {
      this.isAddStudent = false
      if (type === 1) {
        this.tableList()
      }
    },
    editStudent (val) { // 编辑学生
      this.isEditStudent = true
      this.rows = val
      console.log(val)
    },
    noEditStudent (type) {
      this.isEditStudent = false
      if (type === 1) {
        this.tableList()
      }
    },
    delectFn (e) { // 删除
      this.$confirm('此操作将永久删除该学生, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        APIDELSTUDENT({
          uid: e.rows.uid
        }).then((res) => {
          if (res.status === 1) {
            this.$message.success(res.msg)
            this.tableList()
          } else {
            this.$message.error(res.msg)
          }
        }).catch((err) => {
          this.$message.error(err.msg)
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    delectsFn () { // 批量删除
      this.$confirm('此操作将永久删除这些学生, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        APIDELSTUDENTS({
          uid: this.checkStr
        }).then((res) => {
          if (res.status === 1) {
            this.$message.success(res.msg)
            this.tableList()
          } else {
            this.$message.error(res.msg)
          }
        }).catch((err) => {
          this.$message.error(err.msg)
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    bulkImportt () { // 批量导入
      this.isBulkImportt = true
    },
    noBulkImportt (type) {
      this.isBulkImportt = false
      if (type === 1) {
        this.tableList()
      }
    },
    distribution (e) { // 分发
      this.uid = e.rows.uid
      this.schoolId = e.rows.school_id
      this.isDistribution = true
    },
    noDistribution (val) {
      this.isDistribution = false
      if (val !== undefined && val.type === 1) {
        this.tableList()
      }
    },
    exportFn () { // 导出
      window.location.href = this.Api + '/api/student/export?token=' + window.sessionStorage.getItem('token')
    }
  }
}
</script>
